<template>
  <div class="user-setting-page">
    <!-- 个人信息卡片 -->
    <el-card class="info-card" shadow="never">
      <!-- 头部标题 -->
      <div class="info-header">
        <el-icon class="header-icon">
          <User />
        </el-icon>
        <h2 class="header-title">个人信息</h2>
      </div>

      <!-- 头像与角色区域 -->
      <div class="avatar-section">
        <div class="avatar-container">
          <el-icon class="avatar-icon">
            <UserFilled />
          </el-icon>
        </div>
        <div class="role-info">
          <p class="role-name">库管员</p>
          <p class="role-desc">仓储管理员</p>
        </div>
      </div>

      <!-- 基本信息区域 -->
      <div class="basic-info-section">
        <h3 class="section-title">基本信息</h3>
        <div class="info-grid">
          <!-- 第一行 -->
          <div class="info-item">
            <label class="info-label">用户名</label>
            <el-input v-model="userInfo.username" disabled />
          </div>
          <div class="info-item">
            <label class="info-label">姓名</label>
            <el-input v-model="userInfo.name" />
          </div>



          <!-- 第二行 -->
          <div class="info-item">
            <label class="info-label">联系电话</label>
            <el-input v-model="userInfo.phone" />
          </div>
          <div class="info-item">
            <label class="info-label">邮箱</label>
            <el-input v-model="userInfo.email" />6
          </div>



          <!-- 第三行 -->
          <div class="info-item full-width">
            <label class="info-label">备注</label>
            <el-input v-model="userInfo.remark" type="textarea" :rows="3" />
          </div>
        </div>

        <div class="save-btn-container">
          <el-button type="primary" class="save-btn" @click="saveInfo">
            <template #prefix>
              <el-icon>
                <Check  />
              </el-icon>
            </template>
            保存信息
          </el-button>
        </div>
      </div>
    </el-card>

    <!-- 修改密码卡片 -->
    <el-card class="password-card" shadow="never">
      <h3 class="section-title">修改密码</h3>
      <div class="password-form">
        <div class="password-item">
          <label class="password-label">当前密码</label>
          <el-input v-model="passwordForm.oldPassword" type="password" placeholder="请输入当前密码" />
        </div>

        <div class="password-grid">
          <div class="password-item">
            <label class="password-label">新密码</label>
            <el-input v-model="passwordForm.newPassword" type="password" placeholder="请输入新密码" />
          </div>
          <div class="password-item">
            <label class="password-label">确认新密码</label>
            <el-input v-model="passwordForm.confirmPassword" type="password" placeholder="请再次输入新密码" />
          </div>
        </div>

        <p class="password-tip">
          密码长度至少8位，建议包含字母、数字和特殊字符
        </p>

        <div class="change-btn-container">
          <el-button type="primary" class="change-btn" @click="changePassword">
            <el-icon class="btn-icon">
              <Key />
            </el-icon>
            修改密码
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup>
import { reactive } from 'vue'
import { User, UserFilled, Check, Key } from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'

// 用户信息数据
const userInfo = reactive({
  username: '库管员',
  name: '张三',
  employeeId: 'KG001',
  position: '仓储管理员',
  phone: '138****1234',
  email: 'zhangsan@example.com',
  department: '仓储部',
  remark: '负责仓库日常管理，包括入库、出库、盘点等工作'
})

// 密码表单数据
const passwordForm = reactive({
  oldPassword: '',
  newPassword: '',
  confirmPassword: ''
})

// 保存信息方法
const saveInfo = () => {
  ElMessage.success('信息保存成功')
}

// 修改密码方法
const changePassword = () => {
  if (!passwordForm.oldPassword) {
    ElMessage.error('请输入当前密码')
    return
  }
  if (!passwordForm.newPassword || !passwordForm.confirmPassword) {
    ElMessage.error('请输入新密码和确认密码')
    return
  }
  if (passwordForm.newPassword !== passwordForm.confirmPassword) {
    ElMessage.error('两次输入的密码不一致')
    return
  }
  ElMessage.success('密码修改成功')
}
</script>

<style scoped>
.user-setting-page {
  padding: 0px;
  background-color: #f5f5f5;
  min-height: calc(100vh - 60px);
}

/* 卡片样式 */
.info-card,
.password-card {
  margin-bottom: 20px;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

/* 头部样式 */
.info-header {
  display: flex;
  align-items: center;
  padding: 20px 20px 10px;
  border-bottom: 1px solid #f0f0f0;
}

.header-icon {
  color: #409eff;
  margin-right: 8px;
  font-size: 20px;
}

.header-title {
  font-size: 18px;
  color: #333;
  margin: 0;
  font-weight: 500;
}

/* 头像区域 */
.avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 30px 0;
}

.avatar-container {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ecf5ff;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 15px;
}

.avatar-icon {
  font-size: 40px;
  color: #409eff;
}

.role-name {
  font-size: 18px;
  color: #333;
  margin: 0 0 5px;
  font-weight: 500;
}

.role-desc {
  font-size: 14px;
  color: #666;
  margin: 0;
}

/* 区域标题 */
.section-title {
  font-size: 16px;
  color: #409eff;
  margin: 0 0 20px;
  padding-left: 10px;
  border-left: 3px solid #409eff;
  font-weight: 500;
}

/* 基本信息区域 */
.basic-info-section {
  padding: 0 20px 20px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.info-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.full-width {
  grid-column: span 2;
}

.info-label {
  font-size: 14px;
  color: #666;
}

/* 按钮样式 */
.save-btn-container,
.change-btn-container {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.save-btn,
.change-btn {
  background-color: #409eff;
  border-color: #409eff;
  padding: 8px 16px;
  font-size: 14px;
}

.btn-icon {
  margin-right: 5px;
  font-size: 16px;
}

/* 密码修改区域 */
.password-card {
  padding: 20px;
}

.password-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.password-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.password-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.password-label {
  font-size: 14px;
  color: #666;
}

.password-tip {
  font-size: 12px;
  color: #999;
  margin: -10px 0 0 0;
}

/* Element组件样式穿透 */
::v-deep .el-input__wrapper {
  border-radius: 4px;
}

::v-deep .el-input.is-disabled .el-input__wrapper {
  background-color: #f5f5f5;
  color: #666;
}

::v-deep .el-textarea__wrapper {
  border-radius: 4px;
}
</style>